<script>
export default {
  name: "noticeNotice",
  data() {
    return {
      notices: [
        {
          id: 1,
          title: '新品上市，全场满199减50',
          pic: '',
          introduce: '虽然做了一件好事，但很有可能因此招来他人的无端猜测，例如被质疑是否藏有其他利己动机等，乃至谴责。即便如此，还是要做好事。',
          time: '11:30'
        }
      ]
    }
  },
}
</script>

<template>
  <div style="background-color: #f8f8f8">
    <div v-for="item in notices" :key="item.id">
      <p style="text-align: center;margin-top: 10px;font-size: 14px;color: #707070">{{item.time}}</p>
      <div style="background-color: white;padding: 0 12px;margin: 10px 8px">
        <p style="color: #303133;font-size: 16px;line-height: 45px">{{item.title}}</p>
        <img :src="item.pic" style="width: 100%;height: 130px;object-fit: contain;margin-bottom: 10px" v-if="item.pic">
        <div v-if="!item.pic" style="width: 100%;height: 130px;background-color: rgba(0,0,0,.5);color: white;display: flex;justify-content: center;align-items: center;font-size: 20px;margin-bottom: 10px">
          不存在的图片君~
        </div>
        <span style="font-size: 14px;color: #606266;line-height: 19px">{{item.introduce}}</span>
        <van-divider :style="{margin: '10px 0 0'}" />
        <div style="display: flex;justify-content: space-between;align-items: center;height: 35px">
          <span style="color: #707070;font-size: 12px">查看详情</span>
          <van-icon name="arrow" color="#707070" size="16" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>